import React,{Component} from 'react'
import {StyleSheet,View,Text,Image,TouchableOpacity} from 'react-native'
import {PropTypes} from 'prop-types';
import px from '../util/px'

export default function Nav({iconList,buttonAction}){
    return(
        <View 
        style={{flexDirection:'row',justifyContent:'space-around',paddingHorizontal:px(40),paddingTop:px(30),paddingBottom:px(24),backgroundColor:"#ffffff"}}>
             {iconList.map((item,index)=><TouchableOpacity 
              onPress={()=>buttonAction({item,index})}
              key={item.key}
              style={{alignItems:'center'}}>
                    <Image 
                     style={{width:px(88),height:px(88)}}
                     source={item.icon}/>
                     <Text style={{marginTop:px(20),fontSize:14,color:'#333333'}}>{item.label}</Text>
             </TouchableOpacity>)}
        </View>
    )
}